body {
    font-family: "微软雅黑";
}

*{
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}
h1,h2,h3,h4{
    font-weight: normal;
}
img{
    max-width: 100%;
    height: auto;
}
.content {
    margin: auto;
    width: 1250px;
    max-width: 1250px;
}


.header {
    width: 100%; 
    .top {
        width:100%;
        height: 126px;
        background: #222629;
         
        .content {
                position: relative;
            .left {
               position: absolute;
               top: 0;
               left: 0;
               
                .all-menu {
                    float: left;
                    position: relative;
                    padding: 60px 15px;
                    a {   
                        width: 20px;
                        height: 16px;
                        display: block;
                        background: url("../img/header-icon.png") -13px -9px no-repeat;
                    }
                    .sub-menu{
                        display: none;
                        width: 1200px;
                        position: absolute;
                        top: 125px;
                        left: -5px;
                        z-index: 9999;
                        background: #fff;
                        padding: 0 30px;
                        box-shadow: 0 0 8px #ccc;
                        .list{
                            margin: 20px 15px 10px;
                            float: left;
                            h3{
                                color: #555;
                                font-size: 18px;
                                font-weight: normal;
                                padding: 0 0 15px;
                                border-bottom: 1px solid #333;
                            }
                            ul{
                                li{
                                    padding: 15px 0;
                                    border-bottom: 1px solid #eee;
                                    i{
                                        position: absolute;
                                        width: 12px;
                                        height: 12px;
                                        display: inline-block;
                                        background: url(../img/header-arrows.png) no-repeat;
                                    }
                                    .icon1{
                                        
                                        background-position: -27px -21px;
                                    }
                                    .icon2{
                                        display: none;
                                        background-position: -65px -21px;
                                    }
                                    a{
                                        display: inline-block;
                                        background: #fff;
                                        width: 240px;
                                        font-size: 14px;
                                        color: #9EA2AE;
                                        margin: 0 0 0 30px;
                                    }
                                    &:hover a{
                                        color:#03B3E3 ;
                                    }
                                    &:hover .icon1{
                                        display: none;
                                    }
                                    &:hover .icon2{
                                        display: block;
                                    }
                                    &:last-child{
                                    border-bottom: none;
                                    }
                                }
                                
                            }
                        }
                    }
                    &:hover .sub-menu{
                        display: block;
                    }
                }
                .logo{
                    float: left;
                    margin-left: 70px;
                   padding: 40px 10px;
                    a{
                        .icon{
                            display: inline-block;
                            width: 50px;
                            height: 38px;
                            background: url(../img/header-icon.png) -53px 2px no-repeat;
                        }
                        .globals{
                            display: inline-block;
                            width: 150px;
                            height: 35px;
                         
                            background: url(../img/header-icon.png) -6px -40px no-repeat;
                        }
                    }
                }
            }
            .nav{
                margin-left:32%;
                li{
                    margin: 0 15px;
                    float: left;
                    position: relative;
                    a{
                        display: inline-block;
                        color: #7C7F8A;
                        padding: 50px 10px;
                        border-top: 2px solid #222629;
                        &:hover{
                            color:#03B3E3 ;
                            border-top: 2px solid #03B3E3;
                        }
                    }
                    .current{
                        color:#03B3E3 ;
                        border-top: 2px solid #03B3E3;
                    }
                }
                .pages{
                    .sub-nav{
                        position: absolute;
                        left: -20px;
                        display: none;
                        box-shadow: 0 0 8px #ccc;
                        background: #fff;
                        z-index: 9999;

                        li{
                            float: none;
                           margin: 0;
                            a{
                                padding:15px 0 15px 25px;
                                width: 220px;
                                border-top: none;
                                color: #7C7F8A;
                                background: #fff;
                                &:hover{
                                    color:#03B3E3 ;
                                    background: #eee;
                                }
                            }
                        }
                    }
                    &:hover .sub-nav{
                        display: block;
                    }
                }
            }
            .right{
                position: absolute;
                right: 0;
                padding: 50px 15px;
                span{
                    display: inline-block;
                    width: 10px;
                    height: 23px;
                    background: url(../img/header-icon.png) -122px -6px no-repeat;
                }
                .sub-nav{
                        position: absolute;
                        left: -200px;
                        display: none;
                        box-shadow: 0 0 8px #ccc;
                        background: #fff;
                        z-index: 9999;
                        li{
                            float: none;
                           
                            a{
                                display: block;
                                padding:15px 0 15px 25px;
                                width: 200px;
                                border-top: none;
                                color: #9EA2AE;
                                background: #fff;
                                &:hover{
                                    color:#03B3E3;
                                    background: #eee;
                                }
                            }
                        }
                    }
                    &:hover .sub-nav{
                        display: block;
                        
                    }
            }
        }
    }
   //响应式头部导航栏
    .menu-list{
        width: 100%;
   
        background: #222629;
        display: none;
        .item{
            width: 1250px;
            max-width: 1250px;
            margin: auto;
            line-height: 64px;
        }
    }
    .bottom {
        width: 100%;
        height: 64px;
        background: #25292C;
        .inner{
           width: 1250px;
           max-width: 1250px;
           
           margin: auto;
           .left{
                 line-height: 64px;
                 font-size: 14px;
                 float: left;
                 a{
                     color: #45474F;
                   
                 }
                 span{
                     color:#45474F ;
                 }
                 .current{
                     color: #fff;
                 }
            }
            .right{
                float:right ;
                right: 0;
                
                .message{
                    position: relative;
                    margin-right: 40px;
                    a{
                        width: 70px;
                        height: 70px;
                        border-radius: 100%;
                        display: block;
                        color: #fff;
                        background: #E91D62;
                        font-size: 40px;
                        line-height: 70px;
                        text-align: center;
                        position: absolute;
                        bottom: 40px;
                        
                    }
                        .send{
                            opacity: 0;
                            margin-top: 50px;
                            margin-left: -28px;
                            span{
                                padding: 5px 10px;
                                font-size: 12px;
                                position: relative;
                                border-radius: 5px;
                                background: #3A3D44;
                                z-index: 9999;
                                color: #fff;
                            i{
                                width: 0;
                                height: 0;
                                content: '';
                                border: 8px solid transparent;
                                border-bottom-color:#3A3D44 ;
                                position: absolute;
                                left: 50%;
                                margin-left: -4px;
                                top: -15px;
                                
                            }
                        }
                    }
                    &:hover .send{
                        opacity: 1;
                    }
                }
            }
            
        }
    }
    @media only screen and (max-width:1260px){
        #top{
        .content {
            margin: auto;
            width: auto;
            
        
        }
    }
    #bottom{
        .inner{
            width: auto;
            height: auto;
            margin: 0 30px;
            
        }
    }
    
}
    @media only screen and (max-width:1024px){
        #top{
            height: auto;
            display: none;
            .content{
                width: auto;
                
            }
        }
        
        #menu-list{
            display: block;
           height: 64px;
            .item{
                width: auto;
                margin: 0;
                .item-menu{
                    .home{
                        float: left;
                        position: relative;
                        width: 20px;
                        height: 16px;
                        background: url("../img/header-icon.png") -13px -9px no-repeat;
                        margin-left: 30px;
                        margin-top: 20px;
                    }
                    .more{
                        float: right;
                        width: 10px;
                        height: 23px;
                        background: url(../img/header-icon.png) -122px -6px no-repeat;
                        margin-top: 20px;
                        margin-right:30px;
                    }
                    .logo{
                        position: absolute;
                        left: 50%;
                        top: 10px;
                        margin-left: -25px;
                        width: 50px;
                        height: 38px;
                        background: url(../img/header-icon.png) -53px 2px no-repeat;
                    }
                }
                #sub-menu{
                    
                    display: none;
                    width: 100%;
                    background: #222629;
                    text-align: center;
                    position: absolute;
                    top: 64px;
                    z-index: 9999;
                    li{
                        
                        border-top: 1px solid rgba(255,255,255,0.05);
                        a{
                            
                            color: #fff;
                            &:hover{
                                color:#03B3E3 ;
                            }
                        }
                    }
                    
                }
            }
        }
        #bottom{
            .inner{
                width: auto;
                height: auto;
                margin: 0 30px;
                
                .right{
                    display: none;
                }
            }
        }
    }
}

.return-top{
    position: fixed;
    right: 0px;
    top: 700px;
    z-index: 99;
    cursor: pointer;
}

.return-top img{
    max-width: 100%;
    height: auto;
}

//底部
.common-footer-wrapper{
    width: 100%;
    
    .common-footer{
        width: 100%;
        background: #292C31;
        
        .common-footer-center{
            width: 100%;
            max-width: 1250px;
            margin: 0 auto;
            padding:30px 0px;
            position:relative;
            
             .center-text{
                width: 50%;
            }
            
            .center-text span{
                font-size: 26px;
                color: white;
            }
            
            .center-text p{
                font-size: 16px;
                color: #898B97;
                line-height: 24px;
            }
            
            .center-menu{
                position: absolute;
                left: 55%;
                top: 55px;
            }
            
            .center-menu li{
                list-style: none;
                float: left;
                margin-left: 10px;
                cursor: pointer;
            }
        }
    }
    
    .common-footer-bg{
        width: 100%;
        height: 420px;
        background: url(../img/footer10.jpg);
        background-size: 100% 420px;
        
        .bg-text{
            width: 100%;
            max-width: 1250px;
            padding: 40px 0px;
            margin: 0 auto;
            
            .text-left span{
                font-size: 18px;
                color: white;
            }
            
            .text-left p{
                font-size: 12px;
                color: #3A3D44;
            }
            
            .text-left{
                width: 30%;
                float: left;
                
                .left-inner-top{
                    width: 100%;
                    padding: 15px 0px;
                    position: relative;
                    margin-bottom: 75px;
                    
                    .inner-top-write{
                        position: absolute;
                        top: 15px;
                        left: 30px;
                        line-height: 22px;
                        font-size: 14px;
                        color: #848692;
                    }
                    
                    .inner-top-write a{
                        text-decoration: none;
                        color: #0B9BC6;
                        font-size: 14px;
                    }
                    
                    .inner-top-write a:hover{
                        text-decoration: underline;
                        color: #0B9BC6;
                    }
                }
                
                .left-inner-bottom{
                    width: 100%;
                    padding: 15px 0px;
                    border-top: 1px solid #303338;
                    position: relative;

                    .inner-bottom-write{
                        position: absolute;
                        top: 15px;
                        left: 30px;
                        line-height: 22px;
                        font-size: 14px;
                        color: #848692;
                    }
                    
                    .inner-bottom-write a{
                        text-decoration: none;
                        color: #0B9BC6;
                        font-size: 14px;
                    }
                    
                    .inner-bottom-write a:hover{
                        text-decoration: underline;
                        color: #0B9BC6;
                    }
                }
            } 
            
            .text-center{
                 width: 35%;
                 float: left;
                 margin-left: 5%;
                 position: relative;
                 
                 .center-span{
                     font-size: 14px;
                     line-height: 22px;
                     color: #83868F;
                 }
                 
                 .center-img-item{
                     position: absolute;
                     top: 100px;
                     width: 100%;
                 }
                 
                 .center-img-item img{
                     max-width: 100%;
                     height: auto;
                 }
                 
                 .center-img-item li{
                     list-style: none;
                     float: left;
                     margin-bottom: 5px;
                     margin-right:5px ;
                     opacity: 0.6;
                     transition: all .5s; 
                     cursor: pointer;
                 }
                 
                 .center-img-item li:hover{
                     opacity: 1;
                 }
             } 
             
             .text-center span{
                 font-size: 18px;
                 color: white;
             } 
             
             .text-right{
                 width: 25%;
                 float: left;
                 margin-left: 5%;
                 
                 .right-write{
                     font-size: 14px;
                     line-height: 22px;
                     color: #83868F;
                     margin-bottom: 10px;
                 }
                 
                 .right-email{
                     width: 100%;
                     height: 20px;
                     padding: 10px 0px;
                     font-size: 14px;
                     color: #45484F;
                     border-bottom: 2px solid #9599A5;
                 }
                 
                 .right-now{
                     width: 150px;
                     height: 40px;
                     border-radius: 20px;
                     background: #8EC63F;
                     line-height: 40px;
                     text-align: center;
                     margin-top: 20px;
                 }
                 
                 .right-now a{
                     text-decoration: none;
                     display: block;
                     color: white;
                     font-size: 14px;
                 }
                 
                 .right-now a:hover{
                     background: #89CB27;
                     border-radius: 20px;
                 }
             }
             
             .text-right span{
                 font-size: 18px;
                 color: white;
             }
        }
    }
    
    .common-footer-copyright{
        width: 100%;
        height: 100px;
        background: #292C31;
        
        .copyright-inner{
            width: 100%;
            max-width: 1250px;
            height: 100%;
            margin: 0 auto;
            color: #52585A;
            position: relative;
            
            .copyright-img{
                position: absolute;
                top: 30px;
                left: 0px;
                margin-right: 15px;
            }
            
            .copyright-text{
                position: absolute;
                top: 40px;
                left: 40px;
                font-size: 14px;
            }
            
            .copyright-text span{
                color: white;
            }
        }
    }
}

@media screen and (min-width :1024px) and (max-width:1236px){
    .item-hide{
       display: none;
    }
                 
    .center-img-item li{
        list-style: none;
        float: left;
        margin-bottom: 10px;
        margin-right:20px ;
        cursor: pointer !important;
    }
}

@media screen and (min-width:768px) and (max-width:1024px){
    .common-footer-wrapper{

        .common-footer-bg{
            width: 100%;
            height: 550px;
            background: url(../img/footer10.jpg);
            background-size: 100% 550px;
            
            .bg-text{
                .text-left{
                    width: 30%;
                    float: left;
                    
                    .left-inner-top{
                        width: 100%;
                        padding: 15px 0px;
                        position: relative;
                        margin-bottom: 90px;
                    }
                } 
            
                .text-center{
                     width: 56.3%;
                     float: left;
                     margin-left: 10%;
                     position: relative;
                 } 
             

                 .text-right{
                     width: 100%;
                     float: none;
                     margin-left: 0px;
                     margin-top: 330px;
                     
                     .right-email{
                         width: 50%;
                         height: 20px;
                         padding: 10px 0px;
                         font-size: 14px;
                         color: #45484F;
                         border-bottom: 2px solid #9599A5;
                     }
                 }
            }
        }
    }
}

@media screen and (max-width:768px){
    .common-footer-wrapper{

        .common-footer-bg{
            width: 100%;
            height: 500px;
            background: url(../img/footer10.jpg);
            background-size: 100% 500px;
            
            .bg-text{
                .text-left{
                    width: 100%;
                    float: left;
                    
                    .left-inner-top{
                        width: 100%;
                        padding: 15px 0px;
                        position: relative;
                        margin-bottom: 50px;
                    }
                } 
            
                .text-center{
                     width: 56.3%;
                     float: left;
                     margin-left: 10%;
                     position: relative;
                     display: none;
                 } 
             

                 .text-right{
                     width: 100%;
                     float: none;
                     margin-left: 0px;
                     margin-top: 240px;
                     
                     .right-email{
                         width: 50%;
                         height: 20px;
                         padding: 10px 0px;
                         font-size: 14px;
                         color: #45484F;
                         border-bottom: 2px solid #9599A5;
                     }
                 }
            }
        }
    }
}



